<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*"
		 pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	request.setCharacterEncoding("UTF-8");
	String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
	<style>
		/*提示框*/
		#popupcontent {
			z-index: 9000;
			position: fixed;
			visibility: hidden;
			background-color: #fff;
			overflow: auto;
			padding: 5px 5px 5px 5px;
			top: 80px;
			left: 20%;
			width: 60%;
			height: 300px;
		}

		/* 隐藏滚动条 */
		::-webkit-scrollbar {
			display: none;
		}
	</style>
	<link href="<%=path%>/CSS/weixin_add.css" rel="stylesheet" type="text/css" />
	<link href="<%=path%>/appAlert/common.css" rel="stylesheet" type="text/css" />
	<script src="<%=path%>/appAlert/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=path%>/appAlert/alertPopShow.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=path%>/JS/weixin/vue.min.js" type="text/javascript"></script>
	<script src="<%=path%>/JS/weixin/weixinJs.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div id="outDiv_id" style="">

	<table width="100%"  >
		<tr style="background-color: #efeff4;height:40px;">
			<td width="100%" style="text-align: center; font-size: 15px;padding-left: 15px;"><span style="color: #999999;width: 100%">
             			报名信息</span>
			</td>
		</tr>
	</table>

	<form id="sf_form_id" action="<%=path%>/csh/weixin/zfItems" name="example" method="post" enctype="multipart/form-data">
		<table style="background: #ffffff;" height="120px" width="100%">

			<!-- 不可修改的校区 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">所报校区</td>
				<td width="50%" style="border: 1px solid #efeff4;border-left: none;">
					<input type="text"id="class_bm_xq" value="${schoolName }"readonly="readonly"style="border:none;color:#626262" />
				</td>
			</tr>
			<!-- 班型 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">报名课程<i style="color: red;">*</i></td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<select id="class_bm_banxing"style="width:95%" class="all_sf">
						<c:forEach var="clames" items="${clames}" varStatus="status">
							<option value="${clames.fid}!!!${clames.cfprice}" >${clames.fnameL2}</option>
						</c:forEach>
					</select>
				</td>
			</tr>
			<!-- 姓名 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<i style="color: red;">*</i></td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<input type="text"id="class_bm_name"class="hui_inputClass" value="" placeholder="请输入您的姓名"/>
				</td>
			</tr>
			<!-- 身份证 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">身&nbsp;&nbsp;份&nbsp;&nbsp;证<i style="color: red;">*</i></td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<input type="text"id="class_bm_card"class="hui_inputClass" value=""  placeholder="请输入您的身份证号"/>
				</td>
			</tr>
			<!-- 电话 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">手&nbsp;&nbsp;机&nbsp;&nbsp;号<i style="color: red;">*</i></td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<input type="number" value=""class="hui_inputClass"style="font-size: 18px;"id="class_bm_phone" placeholder="请输入您的电话"/>
				</td>
			</tr>
			<!-- 推荐人 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">推&nbsp;&nbsp;荐&nbsp;&nbsp;人<i style="color: red;">*</i></td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<input type="text"onclick="openDiv()" readonly value=""class="hui_inputClass"id="class_bm_tjr"/>
					<input type="text"class="hide"id="class_bm_tjr_id"/>
				</td>
			</tr>
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">应付金额<i style="color: red;">*</i></td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<h3 style="text-align: left;font-size: 18px;"><span id="price_id"></span>元</h3>
				</td>
			</tr>
			<!-- 实付 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">实付金额<i style="color: red;">*</i></td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<input type="number"id="class_bm_sfprice"class="hui_inputClass" value="${thisclass.onlinemoney  }" name="yhprice"style="font-size: 18px;width:80%"/><span style="font-size:13px;color:#b5b5b5">元</span>
				</td>
			</tr>
			<!-- 地址 -->
			<tr height="40px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<textarea type="text"id="class_bm_zz"class="hui_inputClass" style="width:95%"name="content"></textarea>
				</td>
			</tr>
			<!-- 备注 -->
			<tr height="50px">
				<td width="40%" style="text-align: left;color: #626262;font-size: 14px;padding-left: 15px;border: 1px solid #efeff4;border-right: none;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
				<td width="60%" style="border: 1px solid #efeff4;border-left: none;">
					<textarea type="text"id="class_bm_bz"class="hui_inputClass" style="width:95%"name="content"></textarea>
				</td>
			</tr>
		</table>
	</form>

	<div style="width:90%;height:80px"></div>

	<div class="modal-data1 inp"id="popupcontent" style="background-color: #fff;border:0;">
		<table width="100%" frame="void">
			<tr>
				<td>
					<input type="text"id="selectTjr_name_id" style="position: fixed;top:80px;left: calc(20vw );text-indent:25px;width: calc(60vw - 18px);border:none;height:30px" placeholder="请输入推荐人名称" value=""/>
					<img src="<%=path%>/dialog/img/close.png" onclick="closeMask()" style="position: fixed;top:80px;left:calc(80vw - 20px);width:30px;background-color: #fff;height:30px"/>
				</td>
			</tr>
			<tr>
				<td style="padding-top:30px">

					<table id="tblMain"width="100%" frame="void">

						<tr v-on:click="setTrColor()" height="40px" :id="tjr.fid"  v-for="tjr in tjrLists">
							<td><span  v-text="tjr.fnameL2"style="font-size:20px;"></span></td>
						</tr>
					</table>
					<img class="hide" style="position: absolute;left: calc(30vw - 20px);"id="pageLoading_id" src="<%=path%>/dialog/img/loading2.gif"/>
				</td>
			</tr>
		</table>
		<br/>


	</div>
	<br />
</div>
<!-- 支付状态 -->
<div class="nav-bottom"style="height:60px;">
	<div  id="all_ljbm_id" onclick="checkForm()"style="background-image: url(<%=path%>/images/qued@3x.png);color: #fff;text-align: center;padding:18px 0;background-size:100% 60px;width: 100% ;float: left;height:60px">
		立即报名
	</div>
</div>
</body>
<script language="JavaScript" type="text/javascript">

    var $add_page_size = 10;//页数
    var $add_page_jsonLength = 1;//返回数目，防止第一页查询无数据后上拉进入后台
    var $add_page_num = 0;//页码
    var $add_page_falg = true;//用于防止多次下拉
    //如果苹果设置为微信浏览器不能下拉
    $(function(){
        var getAjax = function(){

            //console.log($add_page_falg+"--"+$add_page_jsonLength+"--"+$add_page_size);
            //一秒内第一次上拉加载且上一次加载数据大于等于页面数据数量
            if($add_page_falg && $add_page_jsonLength >= $add_page_size){
                $add_page_num++;
                $add_page_falg = false;
                $("#pageLoading_id").removeClass("hide");
                selectUser();
                setTimeout(function() {
                    $add_page_falg = true;
                }, 1000);
            }

        }
        setTouchmoveById('top',getAjax,'popupcontent');
        if(isIOSPhone()){
            $("#outDiv_id").attr("style","position:fixed;width:100%;height:600px;overflow-y:scroll;");
        }
    })
    function formSrollerSet(flag){
        /* return
        document.querySelector('#mask').addEventListener('touchstart', function (ev) {
            event.preventDefault();
        });
        //微信浏览器禁用滚动条
        if(flag){

            $("body").on("touchmove",function(event){
                event.preventDefault;
            }, false);
                console.log(event.preventDefault)
            $("#popupcontent").off("touchmove");
        //启用
        }else{
            $("body").off("touchmove");
        } */
    }

    var tjrListVue = null;//vue对象
    var $changeFindData = true;//判断数据改变后查询
    selectUser();
    //监听输入框修改
    $('#selectTjr_name_id').bind('input propertychange', function() {
        if($changeFindData){
            $("#pageLoading_id").removeClass("hide");
            $add_page_num = 0;//重置页码
            $changeFindData = false;
            selectUser();
            setTimeout(function() {
                $changeFindData = true;
            }, 1000);
        }else{
            $("#pageLoading_id").addClass("hide");
        }
    });
    //打开div
    function openDiv(){
        $(".nav-bottom").addClass('hide');
        $('.modal-data1').css('visibility', 'visible');
        /* 开启遮罩层和动画  并关闭body的滚动条 */
        setLoading(true,"#outDiv_id");
        $("#loading").addClass('hide');
        formSrollerSet(true);
    }
    //查询推荐人
    function selectUser(){

        $.ajax({
            url: '<%=path%>/DrivingSys/weixin/zxbm/tjrList',
            type: "post",
            dataType:"json",
            data:{"company":$("#class_bm_xq").val(),
                "name":$("#selectTjr_name_id").val(),
                "pageSize":$add_page_size,
                "pageNum": $add_page_num
            },
            success: function(json) {
                console.log(json);
                //如果返回结果数小于页面条目数，loading隐藏
                if(json.length < $add_page_size){
                    $("#pageLoading_id").addClass("hide");
                }/* else{
   	  			$("#pageLoading_id").removeClass("hide");
   	  		} */
                //赋值返还条目数
                $add_page_jsonLength = json.length;
                console.log($add_page_jsonLength)
                $("#loading").addClass('hide');
                if(tjrListVue){
                    //如果不是第一页 push
                    if($add_page_num > 0 ){
                        for(i = 0 ;i<json.length;i++){
                            tjrListVue.tjrLists.push(json[i]);
                        }
                    }else{
                        tjrListVue.tjrLists = json;
                    }
                }else{
                    tjrListVue = new Vue({
                        el: '#tblMain',
                        data:{
                            tjrLists : json
                        },
                        methods:{
                            setTrColor : function (){
                                var thisHtml = $(event.currentTarget);
                                $('.modal-data1').css('visibility', 'hidden');
                                var tjrName = thisHtml.find('td').text();
                                popTipShow.confirm('选择推荐人','确认设置<b style="font-size:17px">'+tjrName+'</b>为推荐人？', ['确 定','取 消'],
                                    function(e){
                                        //callback 处理按钮事件
                                        var button = $(e.target).attr('class');
                                        if(button == 'ok'){
                                            $("#class_bm_tjr_id").val(thisHtml.attr("id"));
                                            $("#class_bm_tjr").val(tjrName);
                                            this.hide();
                                            closeMask();
                                            return;
                                        }
                                        if(button == 'cancel') {
                                            //按下取消按钮执行的操作
                                            //todo ....
                                            this.hide();
                                            $('.modal-data1').css('visibility', 'visible');
                                        }
                                    }
                                );

                                $(".trSelect").removeClass('trSelect');
                                thisHtml.addClass('trSelect');
                                return;
                            }
                        }
                    });
                }
            }
        });

    }
    var $add_can_sumbit = false;
    function checkForm(){
        if($add_can_sumbit)
        {
            return;
        }
        setLoading(true,"#outDiv_id");
        //return;
        //校区
        var xq = $("#class_bm_xq").val();

        //班型
        var classType = $("#class_bm_banxing").val().split("!!!")[0];

        //姓名
        var name = $("#class_bm_name").val();
        if(checkStr(name)||ifNull(name)){
            webToast("请正确填写姓名","middle",1000);
            setLoading(false);
            return;
        }

        //身份证
        var card = $("#class_bm_card").val();
        if(isCardNo(card)||ifNull(card)){
            webToast("身份证请正确填写","middle",1000);
            setLoading(false);
            return;
        }


        //电话
        var phone = $("#class_bm_phone").val();
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if(checkStr(phone)||!reg.test(phone)){
            webToast("手机号请正确填写","middle",1000);
            setLoading(false);
            return;
        }

        var tjr = $("#class_bm_tjr_id").val();
        if(ifNull(tjr)){
            webToast("请选择推荐人","middle",1000);
            setLoading(false);
            return;
        }

        //实付
        var sf = $("#class_bm_sfprice").val();
        if(ifNull(sf)||isNaN(sf*1)||sf*1<=0){
            webToast("实付金额必须大于0","middle",1000);
            setLoading(false);
            return;
        }

        //地址
        var dz = $("#class_bm_zz").val();
        if(checkStr(dz)){
            webToast("地址非法字符","middle",1000);
            setLoading(false);
            return;
        }

        //备注
        var bz = $("#class_bm_bz").val();
        if(checkStr(dz)){
            webToast("备注非法字符","middle",1000);
            setLoading(false);
            return;
        }

        $add_can_sumbit = true;

        $.ajax({
            url: '<%=path%>/DrivingSys/weixin/zxbm/ljbm',
            type: "post",
            dataType:"json",
            data:{"cfclazzid":classType,	//班级ID
                "cfidcardno":card,//身份证
                "cftjrid":tjr,	//推荐人ID
                "fnameL2":name,	//名字
                "cfaddress":dz,	//地址
                "cfsjhm":phone,	//手机
                "cfdesc":bz,		//备注
                "xq":xq,			//校区
                "sf":sf*1			//实付
            },
            success: function(json) {
                console.log(json);
                if(json == null){
                    webToast("报名失败","middle",1000);
                    setLoading(false);
                    return;
                }
                //直接跳转微信支付接口
                var url = 'http://wx.xtwhtz.com/wxpt/wxpayapi/wxpay/JsApiPayPage2.aspx?ddno='+
                    json.ddno+'&sf='+json.cfreceived+'&dwlx=gljx';
                url = '<%=path%>/DrivingSys/weixin/zxbm/wxDdSuccess?ddno='+
                    json.ddno+'&sf='+json.cfreceived+'&dwlx=gljx';
                //测试使用
                //url= 'http://192.168.101.47:8080//DrivingSys/DrivingSys/weixin/zxbm?ddno='+data+'&sf='+paidmoney+'&dwlx=gljx';
                //订单号               实付金额           公司名称
                window.location.href=url;
                //setLoading(false);
            },error:function(){
                console.log("呵呵哒");
                webToast("报名失败","middle",1000);
                setLoading(false);
                return;
            }
        })
    }

    //默认金额
    $("#price_id").text($("#class_bm_banxing").val().split("!!!")[1]);
    //监听报名课程切换
    $("#class_bm_banxing").change(function(){
        console.log($(this).val())
        $("#price_id").text($(this).val().split("!!!")[1])
    });

    function closeMask(){
        $(".nav-bottom").removeClass('hide');
        $("#loading").addClass('hide');
        $("#mask").addClass('hide');
        $('.modal-data1').css('visibility', 'hidden');
    }
</script>